<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>田奇-晒单模块</title>
    <link rel="stylesheet" type="text/css" href="css/shareOrder.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>

</head>
<body>
    <div id="header" class="clear">
        <div class="mark lf"></div>
        <p class="lf" style="margin-top: 15px;"><a href="#" style="color:#fff;">尊敬的: 鱼塘泡茶叶,您好！欢迎来到晒单页面。</a></p>

    </div>
    <div id="order">
        <h3>请选择 您要晒出的商品: </h3>
        <ul class="clear">
            <li>
                <img src="img/12.jpg" width="80" height="80" alt=""/>
                <input type="hidden" value="yc"/>
            </li>
            <li>
                <img src="img/12.jpg" width="80" height="80" alt=""/>
                <input type="hidden" value="yc"/>
            </li>
            <li>
                <img src="img/12.jpg" width="80" height="80" alt=""/>
                <input type="hidden" value="yc"/>
            </li>
        </ul>
    </div>
    <div id="section" class="">
        <div id="div"><span>请输入你想说的话内容...</span></div>
    </div>
    <ul id="saveImg" class="clear">
       <li><img src="img/12.jpg" width="100" height="100" alt=""/><p style="display: none;">×</p></li>
       <li><img src="img/12.jpg" width="100" height="100" alt=""/><p style="display: none;">×</p></li>
       <li><img src="img/12.jpg" width="100" height="100" alt=""/><p style="display: none;">×</p></li>
    </ul>
    <div id="footer" >
        <div class="btn btn-info rt" style="margin-left: 6px;margin-right: 0px;">取消</div>
        <div class="btn btn-primary rt">提交</div>

    </div>


    <script type="text/javascript" src="js/wangEditor.min.js"></script>
    <script>
        var E = window.wangEditor;
        var editor2 = new E('#section');

        editor2.customConfig.uploadImgShowBase64 = true ;
        editor2.create();
        $('#section').children('div').eq(1).css({height:"160px",backgroundColor:'#FFF'});

        $('#section').children('div').eq(1).children('div').css({color:'#000'});


        $("#order>ul>li").each(function(){
            $(this).click(function(){
                $("#order>ul>li").each(function(){
                    $(this).removeClass('here');
                    $(this).css({
                        borderColor:'#FFF'
                    });
                });
                $(this).addClass('here');
                $(this).css({
                    borderColor:'#e4393c'
                });
            })
        });



        $("#saveImg>li").each(function(){
            $(this).click(function(){
                $("#saveImg>li").each(function(){
                    $(this).removeClass('here');
                    $(this).css({
                        borderColor:'#FFF'
                    });
                    $(this).children('p').css({display:'none'})
                });
                $(this).addClass('here');
                $(this).css({
                    borderColor:'#e4393c'
                });
                $(this).children('p').css({display:'block'})
            })
        });





        function addHere(arg){

        }
        addHere("order>ul");
        addHere("saveImg");



        function removeImg(){
            $("#saveImg>li.here").remove();
        }


    </script>



</body>
</html>